<template>
    <div class="menuList">
        <vue-scroll :ops="ops">
        <ul class="menuUlOne">
            <li class="menuOne" v-for="(itemOne,i) in menuList" :key="itemOne.id" @mouseenter="handleMouseEnterOne($event,i,itemOne)" @mouseleave="handleMouseLeaveOne($event,i)" :class="i===twoIndex?'is-opened fontColor':''">
                <a :title="itemOne.name" class="menuOneSpan">{{itemOne.name.slice(0,4)}}</a>
                
            </li>
        </ul>
        </vue-scroll>
        
        <ul class="menuUl menuUlTwo" v-show="showTwo" @mouseleave="handleMouseLeaveTwo($event)" @mouseover="enter()">
            <vue-scroll :ops="ops">
                <li v-for="(itemTwo,two) in itemTwoData" @click="openMenu(itemTwo)" :key="itemTwo.id" @mouseenter="handleMouseEnterTwo($event,two,itemTwo)" :class="two===showThree?'is-opened twoLi':'twoLi'">
                    <span class="itemTwoName" :class="two===showThree?'fontColor':''">{{itemTwo.name}}</span>
                    <i class="iconfont icon-icon-angle-right iconRight" v-if="itemTwo.children.length>0"></i>
                    <i v-if="itemTwo.children.length===0" :class="itemTwo.collect?'iconfont icon-ditu-xing iconXing':'iconfont icon-xingzhuang-xingxing iconXing'"  @click.stop="addCollect(itemTwo)"></i>
                    <ul class="menuUl menuUlThree" v-show="two===showThree&&itemTwo.children.length>0" @mouseleave="handleMouseLeaveThree($event)" @mouseover="enter()">
                        <vue-scroll :ops="ops">
                        <li v-for="(menuUlThree,three) in itemTwo.children" :key="menuUlThree.id" @mouseenter="handleMouseEnterThree($event,three)"  @click="openMenu(menuUlThree)" :class="three===showFour?'is-opened threeLi':'threeLi'">
                            <span class="itemThreeName" :class="three===showFour?'fontColor':''">{{menuUlThree.name}}</span>
                            <i class="iconfont icon-icon-angle-right iconRight" v-if="menuUlThree.children.length>0"></i>
                            <i :class="menuUlThree.collect?'iconfont icon-ditu-xing iconXing':'iconfont icon-xingzhuang-xingxing iconXing'"  @click.stop="addCollect(menuUlThree)"></i>
                            <ul class="menuUl menuUlFour" v-show="showFour==three" v-if="menuUlThree.children.length>0">
                                <li v-for="menuUlFour in menuUlThree.children" :key="menuUlFour.id">
                                    <span>{{menuUlFour.name}}</span>
                                </li>
                            </ul>
                        </li>
                        </vue-scroll>
                    </ul>
                </li>
            </vue-scroll>
        </ul>
                
        <div class="mask" v-show="showMask"></div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState,mapMutations,mapActions } = createNamespacedHelpers('homeModule');
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
export default {
    name: 'SlidebarGd',
    data () {
        return {
            ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            menuList:[],
            itemTwoData:[],
            showTwo:false,
            twoIndex:-1,
            showThree:-1,
            showFour:-1,
            showMask:false,
            
            ids:['3dfdd8cb-ab06-4336-ac56-067e265a2ee7','5c15ae58-a926-409a-b2f3-2de51fb893d3']
        };
    },
    computed: {
        ...mapState([
            
            'menuFlag'
        ]),
    },
    watch: {
        // 只监听数据本身，其属性变化不会触发回调
        menuFlag () {
            this.slibarExpand();
        },
        
    },
    created(){
        // /ptp-engine/apis/menu
        this.$axios.get('/ptp-engine/apis/menu').then(res2 => {
            let menu = res2.data.menuTree;
            let tempData = [];
            for (let i = 0; i < (menu ? menu.length : 0); i++) {
                tempData = tempData.concat(menu[i].children);
            }
            //console.log(tempData);
            //this.childReduce(tempData);
            this.menuList = tempData;
        });
    },
    methods: {
        ...mapActions([
            'addCollectAsync',
            'getMenuColloectAsync'
        ]),
        ...mapMutations([
            'slibarExpand'
        ]),
        ...mapTagMutations([
            'addTag'
        ]),
        childReduce(data){
            for(let i=0;i<data.length;i++){
                for(let j=0;j<this.ids.length;j++){
                    if(data[i].id === this.ids[j].id){
                        data[i].collect = true;
                    }
                }
                if(data[i].children.length>0){
                    this.childReduce(data[i].children);
                }
            }
            
            console.log(data);
        },
        enter(){
            clearTimeout(this.timeOutOne);
            clearTimeout(this.timeOutTwo);
            clearTimeout(this.timeOutThree);
        },
        handleMouseEnterOne(e,i,item){
            clearTimeout(this.timeOutOne);
            clearTimeout(this.timeOutTwo);
            this.twoIndex = i;
            this.showThree = -1;
            this.showFour = -1;
            this.showMask = true;
            this.showTwo = true;
            this.itemTwoData = item.children;
        },
        handleMouseLeaveOne(){
            let that = this;
            this.timeOutOne = setTimeout(function(){
                that.twoIndex = -1;
                that.showMask = false;
                that.showTwo = false;
            },100);
        },
        handleMouseEnterTwo(e,two,item){
            clearTimeout(this.timeOutOne);
            clearTimeout(this.timeOutTwo);
            clearTimeout(this.timeOutThree);
            // if(item.children.length === 0){
            //     this.showThree = -1;
            //     return;
            // }
            this.showThree = two;
            this.showMask = true;
        },
        handleMouseLeaveTwo(){
            let that = this;
            this.timeOutTwo = setTimeout(function(){
                that.twoIndex = -1;
                that.showThree = -1;
                that.showMask = false;
                that.showTwo = false;
            },100);
        },
        handleMouseEnterThree(e,three){
            clearTimeout(this.timeOutThree);
            this.showFour = three;
            this.showMask = true;
        },
        handleMouseLeaveThree(){
            let that = this;
            this.timeOutThree = setTimeout(function(){
                that.twoIndex = -1;
                that.showFour = -1;
                that.showMask = false;
                that.showTwo = false;
            },100);
        },
        // 打开菜单
        openMenu (menu) {
            if (!menu.url || menu.url === '') {
                return;
            }
            // 打开方式
            if (menu.isNew) {
                window.open(menu.url);
            } else if (menu.isBuiltin) {
                // 内置页面
                this.addTag(menu);
            } else {
                // this.addTag({url: menu.url, title: menu.title, id: menu.id, isBuiltin: menu.isBuiltin, convertRules: [convertXfunction]});
                this.addTag(menu);
            }
            this.menuExpandFlag = false;
            this.showTwo = false,
            this.twoIndex = -1;
            this.showThree = -1;
            this.showFour = -1;
            this.showMask = false;
        },
        // 加入收藏夹
        addCollect(data){
            this.addCollectAsync(data).then((res) => {
                if(res.data.code=== -1){
                    this.$message.error(res.data.message);
                }else{
                    this.$message.success('加入成功');
                    this.getMenuColloectAsync();
                }
            });;
            this.showTwo=false;
            this.twoIndex=-1;
            this.showThree=-1;
            this.showFour=-1;
            
            
        }
    },
};
</script>

<style lang="scss" scoped>
.menuList{
    height: 100%;
    box-shadow: 0 5px 10px #ddd;
    position: relative;
    border-right: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    .menuUlOne{
        .menuOne{
            height: 40px;
            line-height: 40px;
            color: #333;
            cursor: pointer;
            .menuOneSpan{
                display: inline-block;
                margin: 0 8px;
                border-bottom: 1px solid #EEEEEE;
                width:57px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .menuOne.active{
            color: #0066ff;
            background: rgba(0, 102, 255, .1);
        }
    }
    .menuUl{
        position: fixed;
        top: 80px;
        background: #fff;
        width: 180px;
        height: 100%;
        z-index: 12;
        li{
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            padding: 0 18px;
            .iconRight{
                float: right;
                font-size: 12px;
                color: #888;
            }
            .iconXing{
                float: right;
                font-size: 14px;
            }
        }
        .twoLi.active{
            background: rgba(0, 102, 255, .1);
            .itemTwoName{
                color: #0066ff;
                
            }
            
        }
        .threeLi.active{
            background: rgba(0, 102, 255, .1);
            .itemThreeName{
                color: #0066ff;
                
            }
            
        }
    }
    .menuUlTwo{
        left: 76px;
       
        top: 80px;
    }
    .menuUlThree{
        left:257px;
    }
    .menuUlFour{
        left:436px;
    }
    .mask{
        position: fixed;
        top: 0;
        background: #fff;
        height: 100%;
        z-index: 10;
        left: 75px;
        right: 0;
        top: 80px;
        margin: auto;
        background: rgba(0, 0, 0, 0.5);
    }
}
</style>
